<template>
  <nav :class="[locale]">
    <ul v-if="globalStore.navHeaderList">
      <li
        v-for="navItem in globalStore.navHeaderList"
        :class="[isActive(navItem.route_url)]"
        :key="navItem.id"
      >
        <NuxtLink :to="navItem.route_url">{{ navItem.title }}</NuxtLink>
      </li>
    </ul>
    <div class="navbar-skeleton" v-else>
      <div class="nav-item" v-for="i in 8" :key="i">
        <Skeleton width="100%" height="100%"></Skeleton>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useGlobalStore } from "../../../../store";
const route = useRoute();
const globalStore = useGlobalStore();
const { locale } = useI18n();
const isActive = computed(
  () => (url: string) => url?.split("?")[0] == route.path ? "active" : ""
);
</script>
<style scoped lang="less">
ul,
nav {
  display: flex;
  align-items: center;
}
nav {
  font-size: 16px;
  justify-content: center;
  ul {
    gap: 20px;
    a {
      text-decoration: none;
      color: #172026;
      &:hover {
        color: var(--yd-primary-color);
      }
    }
    li.active a {
      font-weight: bold;
      color: var(--yd-primary-color);
    }
  }
  &.cn {
    ul {
      gap: 32px;
    }
  }
}

.navbar-skeleton {
  display: flex;
  gap: 32px;
  .nav-item {
    width: 80px;
    height: 30px;
  }
}
@media screen and (max-width: 768px) {
  nav {
    display: none;
  }
}
</style>
